<script setup lang="ts">
import ConsultItem from './ConsultItem.vue'
import { ref } from 'vue'
import type { ConsultOrderItem, ConsultOrderListParams } from '@/types/consult'
import { getConsultOrderList } from '@/services/consult'
import type { ConsultType } from '@/enums'

// 父组件传入类型
const { type } = defineProps<{
  type: ConsultType
}>()

// 翻页参数
const params = ref<ConsultOrderListParams>({
  pageSize: 10,
  current: 1,
  type
})

// 存放列表数据
const list = ref<ConsultOrderItem[]>([])

// 是否正在加载中
const loading = ref(false)

const finished = ref(false)

const onLoad = async () => {
  const res = await getConsultOrderList(params.value)
  // 因为是无限加载, 数据要在旧数据最后进行拼接
  list.value = [...list.value, ...res.data.rows]

  // 判断是否已经最后一页
  if (params.value.current >= res.data.pageTotal) {
    finished.value = true
  } else {
    // 不是最后一页
    // 加载成功需要翻页
    params.value.current++
  }
  // 加载完毕处理正在加载变量
  loading.value = false
}

// 子组件点击删除的处理
const onDelete = (id: string) => {
  list.value = list.value.filter((item) => item.id !== id)
}
</script>

<template>
  <div class="consult-list">
    <!-- van-list 组件的属性包括
    @load 加载数据函数, 会自动在页面进来时触发一次, 每次触底会触发
    v-model 绑定 loading 指明当前是否正在加载中, 避免多次加载
    finished 用来记录是否已经最后一页
    finished-test 翻到最后一页时, 提示语 -->
    <van-list
      @load="onLoad"
      v-model:loading="loading"
      :finished="finished"
      finished-text="我是有底线的"
    >
      <consult-item
        v-for="item in list"
        :key="item.id"
        :item="item"
        @on-delete="onDelete"
      />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>
